<!DOCTYPE html>
<html>
<head>
    <title>markdown编辑器</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
</head>
<body>
<canvas id="c_n9" height="990"
        style="position: fixed; top: 0; left: 0; z-index: -1; opacity: 0.1;background-color: #32CD32;"
        width="1920"></canvas>
<script src="./js/lz.js"></script>

<center>

    <h1>markdown编辑器</h1>

    <textarea id="text-input" cols="60"
              oninput="this.editor.update()" rows="6">在这里输入 **Markdown**</textarea>

</center>

<hr/>

<div style="display: flex;width:100%;">
    <div id="html_code"
         style="width:100%;height:200px;background-color:grey;color:white;margin-right:10px;overflow:auto;"></div>
    <div id="look" style="width:100%;height:200px;background-color:pink;color:black;overflow:auto;"></div>
</div>

<hr/>

<center>
    <h2>HTML转markdown（beta实验性功能）</h2>
</center>

<div id="html2markdown" style="width:100%;height:200px;background-color:tomato;color:black;overflow:auto;"></div>


<script src="./js/markdown.min.js"></script>
<script src="./js/html2md.js"></script>

<script>
    function Editor(input, preview) {
        this.update = function () {
            html_code.innerText = markdown.toHTML(input.value);
            look.innerHTML = markdown.toHTML(input.value);
            html2markdown.innerText = html2md(input.value);
        };
        input.editor = this;
        this.update();
    }

    var $ = function (id) {
        return document.getElementById(id);
    };
    new Editor($("text-input"), $("look"), $("html"), $("html2markdown"));
</script>
</body>
</html>